<template>
  <div class="flex flex-wrap">
    <div
      class="controller-wrapper mr-4 mt-4"
      v-for="(item, index) in controllerRef"
      :key="index"
      @click="handleClick(item)"
    >
      <div class="header">
        <SettingOutlined :style="{ color: '#23dbc9' }" />
        <span class="ml-2"> {{ item.name }}</span>
      </div>

      <div class="footer"> 接口数量：{{ item.apiNumber }} </div>

      <div class="content">
        <div class="content__item get" v-if="item.apiMap.get('get')">
          <span>GET</span>
          <span class="ml-2">{{ item.apiMap.get('get') }}</span>
        </div>
        <div class="content__item post" v-if="item.apiMap.get('post')">
          <span>POST</span>
          <span class="ml-2">{{ item.apiMap.get('post') }}</span>
        </div>
        <div class="content__item put" v-if="item.apiMap.get('put')">
          <span>PUT</span>
          <span class="ml-2">{{ item.apiMap.get('put') }}</span>
        </div>
        <div class="content__item delete" v-if="item.apiMap.get('delete')">
          <span>DELETE</span>
          <span class="ml-2">{{ item.apiMap.get('delete') }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { controllerResult } from '../../lib';
  import { PropType } from 'vue';
  import { SettingOutlined } from '@ant-design/icons-vue';

  const props = defineProps({
    controllerRef: {
      type: Array as PropType<controllerResult[]>,
    },
  });
  const emit = defineEmits(['click']);

  function handleClick(item: controllerResult) {
    emit('click', item);
  }
</script>

<style lang="less" scoped>
  .controller-wrapper {
    width: 320px;
    height: 100px;
    border-radius: 4px;
    background-color: #eee;
    padding: 10px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &:hover {
      cursor: pointer;
    }

    .header {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 600;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      font-size: 13px;

      .content__item {
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-right: 10px;
        padding: 4px;
        border-radius: 4px;

        &.get {
          border: 1px solid #4caf50;
          background-color: rgba(76, 175, 80, 0.2);
          color: #4caf50;
        }

        &.post {
          border: 1px solid #f98c16;
          background-color: rgba(249, 140, 22, 0.2);
          color: #f98c16;
        }

        &.put {
          border: 1px solid #5f90ff;
          background-color: rgba(92, 144, 255, 0.2);
          color: #5f90ff;
        }

        &.delete {
          border: 1px solid #fa541c;
          background-color: rgba(250, 84, 28, 0.2);
          color: #fa541c;
        }
      }
    }

    .footer {
      color: #999;
    }
  }
</style>
